<template>
  <div class="box">
    <span class="meeting-title"><img src="~@/assets/img/left-border.png"
           alt=""> 我的缴费</span>
    <search @sumbit='sumbit'>
      <!--  搜索项 -->
      <template slot='form'>
        <el-form :inline='true'
                 @submit.native.prevent
                 :model='dataForm'
                 ref='dataForm'>
          <el-form-item>
            <el-select v-model="dataForm.type"
                       clearable
                       placeholder="类型">
              <el-option v-for="item in typeList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="dataForm.status"
                       clearable
                       placeholder="状态">
              <el-option v-for="item in statusList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </search>
    <table-template :tableData='tableData'
                    :loading='dataListLoading'
                    :fieldManagement='false'
                    height="465px"
                    :index='true'
                    :dataList='dataList'>
      <template slot="payCode-before">
        <el-table-column prop="type"
                         align="center"
                         label="类型"
                         min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1">停车缴费</span>
            <span v-if="scope.row.type === 2">餐饮缴费</span>
          </template>
        </el-table-column>
      </template>
      <template slot="payCode-after">
        <el-table-column prop="status"
                         align="center"
                         label="状态"
                         min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0">未缴费</span>
            <span v-if="scope.row.status === 1"
                  class="success">已缴费</span>
            <span v-if="scope.row.status === 2">申诉中</span>
            <span v-if="scope.row.status === 3"
                  class="success">已免缴</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column :label="$t('handle')"
                       fixed='right'
                       header-align='center'
                       align='center'
                       width='80'>
        <template slot-scope='scope'>
          <el-button type='text'
                     class='brand'
                     @click="see(scope.row)"
                     size='small'>查看</el-button>
        </template>
      </el-table-column>
    </table-template>
    <el-pagination :current-page='page'
                   :page-sizes='[10,20,50,100]'
                   :total='total'
                   layout='total, sizes, prev, pager, next'
                   @size-change='pageSizeChangeHandle'
                   @current-change='pageCurrentChangeHandle'>
    </el-pagination>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import Search from '@/components/search/search'
import tableTemplate from '@/components/table-template'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      dataForm: {
        status: '',
        type: ''
      },
      dataList: [],
      typeList: [
        { id: 1, name: '停车缴费' },
        { id: 2, name: '餐饮缴费' }
      ],
      statusList: [
        { id: 0, name: '未缴费' },
        { id: 1, name: '已缴费' },
        { id: 2, name: '申诉中' },
        { id: 3, name: '已免缴' }
      ]
    }
  },
  components: {
    Search,
    tableTemplate
  },
  computed: {
    tableData () {
      return [
        { label: '单号', width: '120', prop: 'payCode' },
        { label: '费用', width: '80', prop: 'cost' },
        { label: '申请时间', width: '150', prop: 'createDate' }
      ]
    }
  },
  mounted () {
    this.getTable()
  },
  methods: {
    sumbit () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getTable()
        }
      })
    },
    see (_row) {
      if (_row.type === 1) { // 停车缴费
        this.$router.push({ name: 'myCost-myCost' })
      }
      if (_row.type === 2) { // 餐饮缴费
        return this.$message.error('该功能暂未开放')
        // this.$router.push({ name: 'MyComplaint-MyComplaint' })
      }
    },
    pageSizeChangeHandle (val, fn) {
      this.pageSize = val
      if (fn) {
        fn()
      } else {
        this.getTable()
      }
      return Promise.resolve()
    },
    pageCurrentChangeHandle (val, fn) {
      this.page = val
      if (fn) {
        fn()
      } else {
        this.getTable()
      }
      return Promise.resolve()
    },
    getTable () {
      let arr = {}
      arr.type = this.dataForm.type
      arr.status = this.dataForm.status
      arr.page = this.page
      arr.pageSize = this.pageSize
      this.getDataList({ url: 'tb/workbench/getMyPayListPage', paramData: arr }).then(res => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.page = res.data.page
        this.total = res.data.total
        this.dataList = res.data.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 655px;
  padding: 10px 0 0 10px;
  .meeting-title {
    color: #333;
    line-height: 40px;
    font-size: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.table-template-box {
  min-height: 472px !important;
}
</style>
